.circular-progress {
	$this: &;

	display: inline-block;

	&--primary {
		#{$this}__svg-circle {
			stroke: $color-primary;
		}
	}

	&--secondary {
		#{$this}__svg-circle {
			stroke: $color-secondary;
		}
	}

	&__svg {
		animation: circular-progress-rotate-animation 1.2s linear infinite;
	}

	&__svg-circle {
		stroke: $icon-color;
		stroke-linecap: round;
		stroke-dasharray: 31px, 124px;
		stroke-dashoffset: 0px;
		fill: none;
		animation: cirgular-progress-circular-dash 1.4s ease-in-out infinite;
	}
}

@keyframes circular-progress-rotate-animation {
	100% {
		transform: rotate(360deg);
	}
}

@keyframes cirgular-progress-circular-dash {
	0% {
		stroke-dasharray: 1px, 124px;
		stroke-dashoffset: 0px;
	}
	50% {
		stroke-dasharray: 100px, 124px;
		stroke-dashoffset: -15px;
	}
	100% {
		stroke-dasharray: 100px, 124px;
		stroke-dashoffset: -120px;
	}
}
